<!DOCTYPE html>
<html>
<head>
    <title>User Operations</title>
    <!-- 引入 Bootstrap 4 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- 引入 jQuery 和 Bootstrap 4 的 JavaScript 插件 -->
    <!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>
<body>
<div class="container">
    <h2>用户查询</h2>
    <form id="selectUserForm">
        <div class="form-group">
            <label for="userNameQuery">用户名称:</label>
            <input type="text" class="form-control" id="userNameQuery" name="user_name">
        </div>
        <!-- 结果展示 -->
        <div id="queryResult" class="alert alert-info" style="display:none;"></div>
        <button type="button" class="btn btn-primary" id="selectUser">查询用户</button>
    </form>

    <h2>添加用户</h2>
    <form id="addUserForm">
        <div class="form-group">
            <label for="userNameAdd">用户名称:</label>
            <input type="text" class="form-control" id="userNameAdd" name="UserName">
        </div>
        <div class="form-group">
            <label for="passwordAdd">密码:</label>
            <input type="password" class="form-control" id="passwordAdd" name="Password">
        </div>
        <button type="button" class="btn btn-success" id="addUser">添加用户</button>
    </form>
    <!-- 结果展示 -->
    <div id="addResult" class="alert alert-success" style="display:none;"></div>
</div>


<script>
    $("#selectUser").click(function() {
        // 使用 $.param() 将对象转换为键值对字符串
        var data = $.param({ user_name: $("#userNameQuery").val() });
        
        $.ajax({
            url: "http://127.0.0.1:8081/user/selectUser",
            type: "POST",
            contentType: "application/x-www-form-urlencoded", // 设置 Content-Type 为 x-www-form-urlencoded
            data: data, // 发送键值对数据
            success: function(response) {
                console.log(response);
                // 处理成功的响应
                $("#queryResult").html("User Found: " + response.data.user_name + ", Password: " + response.data.password).show();
            },
            error: function(xhr, status, error) {
                // 处理错误的响应
                $("#queryResult").html("An error occurred: " + error).show();
            }
        });
    });

    $("#addUser").click(function() {
        // 为添加用户操作构建键值对数据
        var data = $.param({
            UserName: $("#userNameAdd").val(),
            Password: $("#passwordAdd").val()
        });
        
        $.ajax({
            url: "http://127.0.0.1:8081/user/addUser",
            type: "POST",
            contentType: "application/x-www-form-urlencoded",
            data: data,
            success: function(response) {
                // 更新添加结果容器的内容并显示
                $("#addResult").html("User Added Successfully!").show();
            },
            error: function(xhr, status, error) {
                $("#addResult").html("An error occurred: " + error).show();
            }
        });
    });
    </script>
</body>
</html>